<template>
  <div class="house-list swiper-container w-full p-1">
    <swiper class="swiper-container" slides-per-view="auto" @click="onClick">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <div class="house-grid-item cursor-pointer flex-col flex-center w-full h-full">
          <img :src="item.image" class="img_1" />
          <p class="text_1">{{ item.name }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/autoplay";

import { Swiper, SwiperSlide } from "swiper/vue";
import HouseAPI from "@/api/house";
import { HouseModel } from "@/model/house-model";

defineOptions({
  name: "UserDetailHouseList",
});

const emit = defineEmits(["change"]);

const list = ref<HouseModel[]>([]);

onMounted(() => {
  fetchData();
});

function fetchData() {
  HouseAPI.getList().then((res: any) => {
    list.value = res;
  });
}

// 点击事件
function onClick(swiper: any) {
  const house = list.value[swiper.clickedIndex];
  emit("change", house);
}
</script>

<style lang="scss" scoped>
.house-list {
  .swiper-slide {
    width: auto;
  }

  .house-grid-item {
    display: inline-flex;
    width: 130px; // 固定 slide 宽度
    aspect-ratio: 1;
    border: 1px solid #aaa;
    margin: 6px;
    border-radius: 5px;
    &:hover {
      transform: scale(1.1);
    }
  }

  .img_1 {
    aspect-ratio: 1;
    width: 55%;
  }

  .text_1 {
    font-size: 13px;
    color: #999999;
    padding: 0;
    margin: 5px 0;
  }
}
</style>
